<template>
  <div class="login">
    <el-carousel class="carousel">
      <el-carousel-item>
        <img src="../assets/images/1.jpg" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/images/2.jpg" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/images/3.jpg" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/images/4.jpg" />
      </el-carousel-item>
    </el-carousel>
    <div class="loginBlock">
      <h3>欢迎使用悦朋软件-qq版本</h3>
      <el-form label-width="0px" :model="user" :rules="rules">
        <el-form-item label prop="userid">
          <el-input v-model="user.userid" placeholder="请输入用户名">
            <template #prefix>
              <el-icon class="el-input__icon"><user-filled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label prop="pwd">
          <el-input
            v-model="user.pwd"
            placeholder="请求输入密码"
            type="password"
            show-password
          >
            <template #prefix>
              <el-icon class="el-input__icon"><lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label prop="code">
          <el-input v-model="user.code" placeholder="验证码" style="width: 90px" />
          <img
            src="https://520mg.com/include/vdimgck.php"
            ref="vdimg"
            @click="changePic"
          />
          <span @click="changePic">换一换</span>
        </el-form-item>
        <el-form-item>
          <router-link to="/admin">立即注册</router-link>
          <router-link to="/admin">忘记密码</router-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :style="{ width: '100%' }">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import { getUser } from "@/api/user.js";

import { UserFilled, Lock } from "@element-plus/icons-vue";
// <el-icon><user-filled /></el-icon>
import { reactive, ref } from "vue";
// getUser();
const user = reactive({ userid: "", pwd: "", code: "" });
const rules = reactive({
  userid: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 18, message: "长度3-18", trigger: "blur" },
  ],
  pwd: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 18, message: "长度3-18", trigger: "blur" },
  ],
  code: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { min: 4, max: 4, message: "长度4", trigger: "blur" },
  ],
});
// 申明一个引用对象
const vdimg = ref();
// 定义一个改变图片的方法
function changePic() {
  // 修改图片的src 为地址+当前时间
  vdimg.value.src = "https://520mg.com/include/vdimgck.php?date=" + new Date().getTime();
}
</script>
<style>
.login .el-carousel__container {
  height: 100vh;
  width: 100%;
}
</style>
<style scoped>
.login {
  position: relative;
}
.carousel {
  width: 100vw;
  height: 100vh;
}
.carousel img {
  width: 100%;
}
.loginBlock {
  position: absolute;
  right: 200px;
  top: 150px;
  width: 380px;
  height: 380px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  padding: 30px;
}
</style>
